/*****************************************************
*
*     Imports
*
******************************************************/


// Activate imports for compiling !!!

//
// UIKit Core
//
@import "../src/less/uikit.less";

//
// Ian Lunn CSS Hover
//
//@import "../../lib/css/ian-lunn/hover.less";


//
// Stageone Customizings
//
@import "../../lib/css/so-uikit-config.less";
@import "../../lib/css/so-less-lib.less";
@import "../../lib/css/so-css-plugins.less";
@import "../../lib/css/so-template-base-styles.less";



/*****************************************************
*
*     Stageone Template
*
******************************************************/

a, .uk-link, .uk-button, a .uk-text-meta, a .uk-text-small {
  .transition();
}

.uk-link-text {

  &:hover {
    .uk-text-meta, .uk-text-small  {
      color:@global-link-hover-color !important;
    }
  }

}


.uk-light,
.uk-section-primary:not(.uk-preserve-color),
.uk-section-secondary:not(.uk-preserve-color),
.uk-tile-primary:not(.uk-preserve-color),
.uk-tile-secondary:not(.uk-preserve-color),
.uk-card-primary.uk-card-body,
.uk-card-secondary.uk-card-body,
.uk-offcanvas-bar {
  a {
    color: @inverse-global-link-color;
    &:hover {
      color: @inverse-global-link-hover-color;
    }
  }
}

.uk-button-default, .uk-button-primary, .uk-button-secondary, .uk-button-third {
  padding-top:@form-button-padding-vertical;
  padding-bottom:@form-button-padding-vertical;
  text-transform: uppercase;
  .fontMedium();
}

.uk-button {
  .roundedCorners(@global-small-border-radius,@global-small-border-radius,@global-small-border-radius,@global-small-border-radius);
}

.uk-h1, h1 {
  font-weight: @font-bold-weight;
}

.uk-h2, h2, .uk-h3, h3 {
  font-weight: @font-bold-weight;
}

.uk-h4, h4 {
  text-transform: uppercase;
}

.uk-text-meta {
  line-height:@small-line-height;
  font-weight: @font-medium-weight;
}

// Optional button border
.uk-button-default, .uk-button-primary, .uk-button-secondary, .uk-button-third {
  border:@global-medium-border-width solid @global-link-color;
  &:hover {
    border:@global-medium-border-width solid @global-link-hover-color;
  }
}

.uk-button-default {
  border-color:@button-default-background;
  &:hover {
    border-color:@button-default-hover-background;
  }
}

.uk-button-primary {
  border-color:@button-primary-background;
  &:hover {
    border-color:@button-primary-hover-background;
  }
}

.uk-button-secondary {
  border-color:@button-secondary-background;
  &:hover {
    border-color:@button-secondary-hover-background;
  }
}

.uk-button-third {
  border-color:@color-c;
  background: @color-c;
  color:@global-inverse-color !important;
  &:hover {
    border-color:@global-link-hover-color;
    background: @global-link-hover-color;
    color:@global-inverse-color  !important;
  }
}

// Inverse Button
.uk-light .uk-button-default, .uk-light.uk-button-default {
  border-color:@inverse-button-default-background;
  &:hover {
    border-color:@inverse-button-default-hover-background;
  }
}

.uk-light .uk-button-primary, .uk-light.uk-button-primary {
  border-color:@inverse-button-primary-background;
  &:hover {
    border-color:@inverse-button-primary-hover-background;
  }
}

.uk-light .uk-button-secondary, .uk-light.uk-button-secondary {
  border-color:@inverse-button-secondary-background;
  &:hover {
    border-color:@inverse-button-secondary-hover-background;
  }
}

.uk-light .uk-button-text, .uk-button-text.uk-light,
.uk-light .uk-button-link, .uk-button-link.uk-light {
  color: @inverse-global-emphasis-color;
  &:hover {
    color: @inverse-global-link-hover-color;
  }
}

.uk-light .uk-card-title, .uk-card-title.uk-light {
  color: @inverse-global-emphasis-color !important;
}

.uk-accordion {
  margin-top:@global-medium-margin !important;

  > li {
    padding-bottom: 20px;
  }
}

.uk-open {
  > .uk-accordion-title {
    color: @accordion-title-hover-color;
  }

  > .uk-card-header {
    background-color: @color-a;
    color:@color-white !important;
    > .uk-text-meta {
      color:@color-white !important;
    }
  }
}

.uk-list-bullet > li {
  position:relative;
}
.uk-list-bullet > ::before {
  position:absolute;
  left:0;
  height:30px;
}

.uk-list-divider > :nth-child(n+2) {
  padding-top:@list-divider-margin-top + 5px;
}


.cover-top {
  .coverPosition(50%,0);
}

.uk-background-1-3-center  {
  background-position:30% 50%;
}

.background-gradient {
  .quadGradient();
}

.background-blur {
  filter:grayscale(100%) blur(4px);
}

.uk-overlay-primary-light {
  background: fade(@overlay-primary-background, 25%);
}

@spacer-width: 18px;

#bottom-spacer, #left-spacer, #right-spacer, #top-spacer {
  z-index: @global-z-index + 10000;
  position: fixed;
  background: @color-a;
}

#snd-top-spacer, #snd-bottom-spacer {
  z-index: @global-z-index + 10001;
  position: fixed;
  height: @spacer-width;
  width:100%;
  background: @color-base-e;
}

#left-spacer, #right-spacer {
  top: 0;
  bottom: 0;
  width: @spacer-width;
}

#top-spacer, #bottom-spacer, #snd-top-spacer, #snd-bottom-spacer {
  height: @spacer-width;
  width:100%;
}

#top-spacer, #snd-top-spacer {
  top: 0;
}

#bottom-spacer, #snd-bottom-spacer {
  bottom: 0;
  height: @spacer-width;
}

#left-spacer {
  left:0;
}

#right-spacer {
  right:0;
}

//
// phone portrait
//

.icon-square {
  width:35px;
  height:35px;
  margin-left:5px;
  margin-right:5px;
  background:@color-a;
  color:@global-inverse-color;
  border-radius: @global-border-radius;

  &:hover {
    background:@global-link-hover-color;
    color:@global-inverse-color;
  }

  &#share-facebook {
    background:@global-color;
    color:@global-inverse-color;
    &:hover {
      background:#3c5a9c;
    }

  }

  &#share-twitter {
    background:@global-color;
    color:@global-inverse-color;
    &:hover {
      background:#59ccfd;
    }

  }

  &#share-instagram {
    background:@global-color;
    color:@global-inverse-color;
    &:hover {
      background:#e83083;
    }

  }

  &#share-xing {
    background:@global-color;
    color:@global-inverse-color;
    &:hover {
      background:#0b6163;
    }

  }

  &#share-linked-in {
    background:@global-color;
    color:@global-inverse-color;
    &:hover {
      background:#1178b3;
    }

  }

  &#share-youtube {
    background:@global-color;
    color:@global-inverse-color;
    &:hover {
      background:#dc001f;
    }

  }


}


.lang-navbar-container {
  padding:0 65px 0 0;
}

.lang-button {
  background:transparent;
  color:@color-base-e;
  border:1px solid @color-base-e;
  border-radius:0;
  &.uk-open {
    background:@color-base-e;
    color:@color-a;
  }

}

#lang-dropdown {
  background:@color-base-e;
  min-width:auto;
  padding:10px;
  > a {
    display:block;
    color:@color-a;
    padding:4px 25px;
    text-decoration: none;
  }
}

.offset-cta-section {
  height:160px;
  .transform(translate(0, -80px));
  margin-bottom: -80px;
}

.offset-bottom {
  .transform(translate(0, 40px));
}

.offset-top-right {
  .transform(translate(50px, 100px));
}

#header,
.uk-navbar-container,
.uk-navbar-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle {
  height: @mobile-header-height;
}

.header-fixed-active {

  #header {
    background:@global-color;
    color:@global-inverse-color;
    //border-bottom:@global-border-width solid @global-border;
    .boxShadow();
  }

  .uk-navbar-dropdown {
    top: @navbar-nav-item-height !important;
  }

  #main-navigation.uk-navbar-nav > li.level-1 {
    > a {
      &:before {
        top: 20px;
      }
    }
  }
}


.uk-navbar-toggle {
  padding:0 38px 0 0;
}

#contactFrame {
  .contact.row:first-child {
    margin-top:10px !important;
  }
}

.uk-input, .uk-textarea, .uk-select {
  .transition();
  border:@global-border-width solid @global-muted-color;
}

.has-focus {
  .uk-input, .uk-textarea, .uk-select {
    border:@global-border-width solid @color-a;
  }
}


.error-container {
  color:@color-warning;
}

.ipt-valid {
  color:@color-success;
}


.ipt-error {
  color:@color-warning;
}

.uk-input.ipt-error, .uk-textarea.ipt-error, .uk-select.ipt-error {
  border-color:@color-warning;
}

.uk-navbar-dropdown {
  .transition();
}

.uk-navbar-container, .eyecatcher-placeholder {
  min-height:@mobile-header-height;
}

.mobile-subnav-icon {
  margin-right:5px;
  vertical-align: 2px;
  display: inline-block;
}



#mobile-navigation {

  .level-1.starter_active {
    a.starter_active {
      .fontBold() !important;
    }
  }

  .level-2.active {
    .mobile-subnav-icon {
      display: inline-block;
    }
    > a {
      .fontMedium();
      color:@color-white !important;
    }
  }
}


//
// tablet portrait
//
@media (min-width: @breakpoint-small) {

  #short-message {
    position:fixed;
  }

}


//
// tablet landscape
//
@media (min-width: @breakpoint-medium) {

  .lang-navbar-container {
    padding:0 5px 0 25px;
  }

  #header,
  .uk-navbar-container,
  .uk-navbar-nav > li > a,
  .uk-navbar-item,
  .uk-navbar-toggle {
    height: @navbar-nav-item-height + 60;
  }

  .eyecatcher-placeholder {
    min-height:@navbar-nav-item-height + 60;
  }


  #header {
    .transition();
    //border-bottom:1px solid @global-border;
  }

  #header,
  .uk-navbar-container,
  .uk-navbar-nav > li > a,
  .uk-navbar-item,
  .uk-navbar-toggle {
    .transition();
  }

  .header-fixed-active {

    #header,
    .uk-navbar-container,
    .uk-navbar-nav > li > a,
    .uk-navbar-item,
    .uk-navbar-toggle {
      height: @navbar-nav-item-height !important;
      min-height: @navbar-nav-item-height !important;;
    }

  }

}

//
// desktop
//
@media (min-width: @breakpoint-large) {

  #main-navigation {
    .starter_active {
      .main-nav-spacer {
        background-color: @color-b;
        color:@global-inverse-color;
        font-weight: @font-medium-weight;
      }
    }

  }


  .uk-light {
    #main-navigation.uk-navbar-nav > li.level-1 {
      > a {
        //margin:0 25px;
      }
    }
  }

}

//
// large screens
//
@media (min-width: @breakpoint-xlarge) {


}


//
// crossbrowser fallback
//

.is-explorer {


}